import React, { Fragment } from 'react';
import { Popover, Card, Tooltip, Button, Content, Bubble } from 'react-fule-ui';
import './index.scss';
export default function FulePopover() {
  return (
    <Fragment>
      <Content>
        <Content.Header>气泡</Content.Header>
        <Content.Body>
          <Card>
            <Card.Header>Bubble</Card.Header>
            <Card.Body>
              <Bubble
                content="12"
                placement="top"
                style={{ minWidth: 'initial', marginRight: 20 }}
              />
              <Bubble
                content="12"
                placement="top"
                theme="error"
                style={{ minWidth: 'initial', marginRight: 20 }}
              />
              <Bubble
                content="12"
                placement="top"
                theme="dark"
                style={{ minWidth: 'initial', marginRight: 20 }}
              />
            </Card.Body>
          </Card>
          <Card>
            <Card.Header>Tooltip</Card.Header>
            <Card.Body>
              <Tooltip content="字符串">
                <Button type="button">Tooltip</Button>
              </Tooltip>
            </Card.Body>
          </Card>
          <Card className="m-hidden">
            <Card.Header>Bubble - hover</Card.Header>
            <Card.Body style={{ overflow: 'auto' }}>
              <table className="FulePopover-table">
                <tbody>
                  <tr>
                    <td></td>
                    <td>
                      <Popover
                        content={
                          <Fragment>
                            <p>top-starttop-starttop-starttop-start</p>
                            <p>top-start</p>
                            <p>top-start</p>
                          </Fragment>
                        }
                        placement="top-start"
                        trigger="hover"
                      >
                        <span className="FulePopover-btn">点击 top-start</span>
                      </Popover>
                    </td>
                    <td>
                      <Popover
                        content={
                          <Fragment>
                            <p>toptoptoptoptoptoptoptoptoptoptoptop</p>
                            <p>top</p>
                            <p>top</p>
                          </Fragment>
                        }
                        placement="top"
                        theme="error"
                        trigger="hover"
                      >
                        <span className="FulePopover-btn">top 警告色</span>
                      </Popover>
                    </td>
                    <td>
                      <Popover
                        content={
                          <Fragment>
                            <p>
                              top-endtop-endtop-endtop-endtop-endtop-endtop-endtop-endtop-end
                            </p>
                            <p>top-end</p>
                            <p>top-end</p>
                          </Fragment>
                        }
                        placement="top-end"
                        theme="dark"
                        trigger="hover"
                      >
                        <span className="FulePopover-btn">top-end 黑色</span>
                      </Popover>
                    </td>
                    <td></td>
                  </tr>
                  <tr>
                    <td>
                      <Popover
                        content={
                          <Fragment>
                            <p>left-startleft-startleft-start</p>
                            <p>left-start</p>
                            <p>left-start</p>
                          </Fragment>
                        }
                        placement="left-start"
                      >
                        <span className="FulePopover-btn">left-start</span>
                      </Popover>
                    </td>
                    <td rowSpan="3" colSpan="3">
                      <div className="FulePopover-box"></div>
                    </td>
                    <td>
                      <Popover
                        content={
                          <Fragment>
                            <p>right-start</p>
                            <p>right-start</p>
                            <p>right-start</p>
                          </Fragment>
                        }
                        placement="right-start"
                      >
                        <span className="FulePopover-btn">right-start</span>
                      </Popover>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <Popover
                        content={
                          <Fragment>
                            <p>left</p>
                            <p>left</p>
                            <p>left</p>
                          </Fragment>
                        }
                        placement="left"
                      >
                        <span className="FulePopover-btn">left-center</span>
                      </Popover>
                    </td>
                    <td>
                      <Popover
                        content={
                          <Fragment>
                            <p>right-center</p>
                            <p>right-center</p>
                            <p>right-center</p>
                          </Fragment>
                        }
                        placement="right"
                      >
                        <span className="FulePopover-btn">right-center</span>
                      </Popover>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <Popover
                        content={
                          <Fragment>
                            <p>left-end</p>
                            <p>left-end</p>
                            <p>left-end</p>
                          </Fragment>
                        }
                        placement="left-end"
                      >
                        <span className="FulePopover-btn">left-end</span>
                      </Popover>
                    </td>
                    <td>
                      <Popover
                        content={
                          <Fragment>
                            <p>right-end</p>
                            <p>right-end</p>
                            <p>right-end</p>
                          </Fragment>
                        }
                        placement="right-end"
                      >
                        <span className="FulePopover-btn">right-end</span>
                      </Popover>
                    </td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>
                      <Popover
                        content={
                          <Fragment>
                            <p>
                              bottom-startbottom-startbottom-startbottom-start
                            </p>
                            <p>bottom-start</p>
                            <p>bottom-start</p>
                          </Fragment>
                        }
                        placement="bottom-start"
                      >
                        <span className="FulePopover-btn">bottom-start</span>
                      </Popover>
                    </td>
                    <td>
                      <Popover
                        content={
                          <Fragment>
                            <p>bottom</p>
                            <p>bottom</p>
                            <p>bottom</p>
                          </Fragment>
                        }
                        placement="bottom"
                        className="aaa"
                      >
                        <span className="FulePopover-btn">bottom</span>
                      </Popover>
                    </td>
                    <td>
                      <Popover
                        content={
                          <Fragment>
                            <p>bottom-endbottom-endbottom-endbottom-end</p>
                            <p>bottom-end</p>
                            <p>bottom-end</p>
                          </Fragment>
                        }
                        placement="bottom-end"
                      >
                        <span className="FulePopover-btn">bottom-end</span>
                      </Popover>
                    </td>
                    <td></td>
                  </tr>
                </tbody>
              </table>
            </Card.Body>
          </Card>
          {/*  */}
          <Card>
            <Card.Header>气泡 - click</Card.Header>
            <Card.Body>
              <div className="demo-block">
                <Popover
                  content={
                    <Fragment>
                      <p>top-start,top-start,top-start,top-start,top-start</p>
                      <p>top-start</p>
                      <p>top-start</p>
                    </Fragment>
                  }
                  placement="top-end"
                  trigger="click"
                >
                  <span className="FulePopover-btn">点击 top-start</span>
                </Popover>
              </div>
              <div className="demo-block">
                <Popover
                  content={
                    <Fragment>
                      <p>bottom-end,bottom-end,bottom-end</p>
                      <p>bottom-end</p>
                      <p>bottom-end</p>
                    </Fragment>
                  }
                  placement="bottom"
                  trigger="click"
                >
                  <span className="FulePopover-btn">点击 bottom</span>
                </Popover>
              </div>
              <div className="demo-block">
                <Popover
                  content={
                    <Fragment>
                      <p>top</p>
                      <p>top</p>
                      <p>top</p>
                    </Fragment>
                  }
                  placement="top"
                  trigger="click"
                >
                  <span className="FulePopover-btn">点击 top</span>
                </Popover>
              </div>
            </Card.Body>
          </Card>
        </Content.Body>
      </Content>
    </Fragment>
  );
}
